<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute;   /* 开启绝对定位才动得了*/
			}
			#box2
			{
				width: 100px;
				height: 100px;
				background-color: blue;
				margin: 200px;
				position: absolute;
			}
			body
			{
				width: 2000px;
				height: 2000px;
			}
			/* 滚动条的问题 */
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				
				var box1=document.getElementById("box1");
				var box2=document.getElementById("box2");
				function str(box)
				{
					box.onmousedown=function(event)   //移动上去就要开始计算偏移量了
						{
							//按住进行拖拽，拖拽的时候是按住的 
							//设置box1捕获所有鼠标按下的事件，相当于一直按住它
							/* if(box1.setCapture)
							{
								box1.setCapture();
							};  //一次性捕获，会一直捕获 */
							//box.setCapture&&box.setCapture();   //前面为真，执行后面
							event=event||window.event;
							var ox=event.clientX-box.offsetLeft;
							var oy=event.clientY-box.offsetTop;
							
								//不需要这个直接就解决了是什么情况，鼠标是相对整个页面，而box1是相对于当前页面
							document.onmousemove=function(event)   //在box1里面移动才可以动，那还怎么动 只能往下移动
							{
								event=event||window.event;
								
								var x1=event.clientX-ox;   /* 是div的偏移量*/
								var y1=event.clientY-oy;   /* 是div的偏移量什么情况，下面的不也是吗*/
								
								var x2=document.body.scrollLeft||document.documentElement.scrollLeft;
									var y2=document.body.scrollTop||document.documentElement.scrollTop; 
								box.style.left=x1+x2+"px";
								box.style.top=y1+y2+"px";
								
							}
							document.onmouseup=function()   //在任何地方松开都不会移动了
							{
								document.onmousemove=null;
								document.onmouseup=null;
								//当鼠标松开，取消对事件的捕获
								/* //if(box1.releaseCapture)
								{
									box1.releaseCapture();
								} */
								
							}
							//当我们拖拽一个网页中的内容时，浏览器会默认去除搜索引擎中搜索内容
							//此时会导致拖拽功能的异常，这个是浏览器提供的默认行为
							//如果不希望发生这个行为，可以通过return false来取消默认行为
							return false;    //ie8及以下不支持
						}
					}
					//str(box1);
					str(box2);
				}
				
		</script>
	</head>
	<body>
		<p>这是一段文字</p>
		<div id="box1"></div>
		<div id="box2"></div>
		
	</body>
</html>